
<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { fetchGetActivityList } from '@/api/activity'
import { filterDate } from '@/utils/format'
import { useUserStore } from "@/store/modules/user";


const router = useRouter();
/**
 * 跳转详情页面
 */
const navDetail = (row: any) => {
  console.log(row);
  router.push({ path: '/student/activity/detail', query: { ...row } })
}

const typeOptions = [
  {
    value: 0,
    label: '社团活动',
  },
  {
    value: 1,
    label: '院级活动',
  },
  {
    value: 2,
    label: '校级活动',
  },
]
const formOptions = [
  {
    value: 0,
    label: '线上',
  },
  {
    value: 1,
    label: '线下',
  },
]
const statusOptions = [
  {
    value: 0,
    label: '报名未开始',
  },
  {
    value: 1,
    label: '报名中',
  },
  {
    value: 2,
    label: '报名已结束',
  },
  {
    value: 3,
    label: '活动进行汇总',
  },
  {
    value: 4,
    label: '活动已结束',
  },
  {
    value: 5,
    label: '活动已取消',
  },
]

// 过滤活动类型
const filterActivityType = (val: number) => {
  switch (val) {
    case 0:
      return '社团活动'
    case 1:
      return '院级活动'
    case 2:
      return '校级活动'
  }
}
// 表单数据
let tableData = reactive([])
// 实际传递的条件
const listQuery = reactive({
  currentPage: 1,
  name: undefined, // 名称
  type: undefined, // 类型
  status: undefined, // 招新状态
  pageSize: 10,
  form: undefined, // 活动形式
  person:useUserStore().userInfo.id
})
// 显示在界面上的查询条件
const showQuery = reactive({
  currentPage: 1,
  name: undefined, // 名称
  type: undefined, // 类型
  status: undefined, // 招新状态
  form: undefined, // 活动形式
})
const total = ref<number>(0)// 列表总数
// 查询
const handleSearch = () => {
  getPageList()
}

const tableLoading = ref(false)
// 获取列表
const getPageList = async () => {
  tableLoading.value = true
  listQuery.name = showQuery.name
  listQuery.type = showQuery.type
  listQuery.status = showQuery.status
  listQuery.form = showQuery.form
  const res = await fetchGetActivityList(listQuery)
  const { currentPage, data } = res.data
  listQuery.currentPage = showQuery.currentPage = currentPage
  total.value = res.data.total
  tableData = data
  tableLoading.value = false
}

onMounted(() => {
  getPageList()
})
const customColors = [
  { color: '#38EF7D', percentage: 20 },
  { color: '#2FDC80', percentage: 40 },
  { color: '#25C585', percentage: 60 },
  { color: '#1BAF8A', percentage: 80 },
  { color: '#11998D', percentage: 100 },
]

</script>

<template>
  <div class="society-content">
    <div class="header flex flex-center">
      <el-select v-model="showQuery.type" class="m-2" placeholder="活动类型" clearable>
        <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-select v-model="showQuery.form" class="m-2" placeholder="活动形式" clearable>
        <el-option v-for="item in formOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-select v-model="showQuery.status" class="m-2" placeholder="活动状态" clearable>
        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-input v-model="showQuery.name" placeholder="活动名称" clearable />
      <el-button type="primary" @click="handleSearch" :icon="Search" class="btn-green">
        查询
      </el-button>
    </div>

    <el-table :data="tableData" stripe v-loading="tableLoading">
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="name" label="活动名称" show-overflow-tooltip>
        <template #default="scope">
          <div class="check-wait pointer" @click="navDetail(scope.row)">
            {{ scope.row.name }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="活动地点" show-overflow-tooltip />
      <el-table-column prop="activityForm" label="活动形式" show-overflow-tooltip width="100">
        <template #default="scope">
          <div class="flex flex-center">
            <div class="student-button">{{ scope.row.form == 0 ? '线上' : '线下' }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="活动类型">
        <template #default="scope">
          <div class="flex flex-center">
            <div class="student-button">{{ filterActivityType(scope.row.type) }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="score" label="二课分" width="80">
        <template #default="scope">
          <div class="theme-success">
            {{ scope.row.score }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="percentage" label="报名进度" width="250">
        <template #default="scope">
          <el-progress :percentage="Number((scope.row.nowNumber / scope.row.planNumber * 100).toFixed(1))"
            :color="customColors" :stroke-width="12" />
        </template>
      </el-table-column>
      <el-table-column prop="minister" label="剩余名额">
        <template #default="scope">
          <div>{{ scope.row.planNumber - scope.row.nowNumber }}</div>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="applicationStartTime" label="报名开始时间">
        <template #default="scope">
          <div>
            {{ filterDate(scope.row.applicationStartTime) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="applicationEndTime" label="报名截止时间">
        <template #default="scope">
          <div>
            {{ filterDate(scope.row.applicationEndTime) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="formalStartTime" label="活动开始时间">
        <template #default="scope">
          <div>
            {{ filterDate(scope.row.formalStartTime) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="formalEndTime" label="活动截止时间">
        <template #default="scope">
          <div>
            {{ filterDate(scope.row.formalEndTime) }}
          </div>
        </template>
      </el-table-column> -->

      <el-table-column prop="status" label="活动状态" width="120">
        <template #default="scope">
          <div v-if="scope.row.status == 0" class="theme-info">报名未开始</div>
          <div v-if="scope.row.status == 1" class="theme-success">报名中</div>
          <div v-if="scope.row.status == 2" class="theme-error">报名结束</div>
          <div v-if="scope.row.status == 3" class="theme-blue">活动进行中</div>
          <div v-if="scope.row.status == 4" class="theme-info">活动已结束</div>
          <div v-if="scope.row.status == 5" class="theme-error">活动已取消</div>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="操作">
        <template #default="scope">
          <div class="theme-success">
            <el-button type="primary" class="btn-red" v-if="scope.row.status == 1">退出</el-button>
            <el-button type="primary" class="btn-white" @click="navDetail(scope.row)">查看</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :total="total" v-model:page="listQuery.currentPage" v-model:limit="listQuery.pageSize" hide-on-single-page
      @pagination="getPageList" />
  </div>
</template>

<style lang="scss" scoped>
.society-content {
  width: 100%;
  min-height: 45rem;
  display: grid;
  grid-template-rows: 8rem auto;
  gap: 2rem;

  .header {
    border: 1px solid #eee;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

    .el-input,
    .el-select {
      margin-right: 20px;
      width: 16%;
    }
  }

  .student-button {
    border: 1px solid #DAECFE;
    color: #409EFF;
    background-color: #ECF5FF;
    // width: 5.5rem;
    padding: 0 0.8rem;
    height: 3rem;
    line-height: 3rem;
    text-align: center;
    border-radius: 0.5rem;
  }
}
</style>

